<!-- 用例任务列表 -->
<template>
  <div class="div_box">
    <div style="min-width: 1600px;">
      <!-- 头部搜索框 -->
      <el-form ref="form" :inline="true" label-width="80px">
        <el-form-item>
          <el-select v-model="selectDemandList" multiple collapse-tags filterable clearable style="margin-left: 20px;" placeholder="根据需求筛选">
            <el-option v-for="item in selectDemandListOption" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" icon="el-icon-search" title="刷新" circle @click="getTaskList()" />
        </el-form-item>
      </el-form>
      <!-- table展示页 -->
      <el-table v-loading="taskListLoading" :data="taskList" border style="width: 100%;" @selection-change="selectionChangeHandle">
        <el-table-column type="selection" header-align="center" align="center" width="50" />
        <el-table-column prop="id" header-align="center" align="center" label="任务ID" width="100" sortable />
        <el-table-column prop="name" header-align="center" align="center" label="任务名称" sortable width="200" />
        <el-table-column header-align="center" align="center" label="关联" sortable width="200">
          <template slot-scope="scope">
            <span v-if="scope.row.taskType == 'DEMAND_TASK'">需求：{{ scope.row.typeName }}</span>
            <span v-if="scope.row.taskType == 'MODULE_TASK'">模块：{{ scope.row.typeName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="creator" header-align="center" align="center" label="负责人" sortable />
        <el-table-column prop="executor" header-align="center" align="center" label="参与人" sortable />
        <el-table-column header-align="center" align="center" label="状态" sortabl>
          <template slot-scope="scope">
            <div v-if="scope.row.status == 'RUNNING'">
              <el-progress :text-inside="true" :stroke-width="18" :percentage="scope.row.rate" :format="rateFormat" :color="customColors" />
              <br>
              <el-progress :text-inside="true" :stroke-width="18" :percentage="scope.row.passRate" :format="passRateFormat" :color="customColorMethod" />
            </div>
            <el-tag v-if="scope.row.status == 'INITED'" type="info">初始化</el-tag>
            <el-tag v-if="scope.row.status == 'WAITTING'" type="info">待测试</el-tag>
            <el-tag v-if="scope.row.status == 'STOPPED'" type="warning">已停止</el-tag>
            <el-tag v-if="scope.row.status == 'FINISHED'" type="success">已完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" width="200" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" icon="el-icon-s-custom" title="手工执行任务" @click="manualTestTask(scope.row)" />
            <el-button type="text" size="small" icon="el-icon-s-opportunity" title="自动化执行任务" @click="autoTestTask(scope.row)" />
            <el-button type="text" size="small" icon="el-icon-s-order" title="查看任务报告" @click="taskReport(scope.row)" />
            <el-button type="text" size="small" icon="el-icon-delete" title="删除任务记录" @click="deleteTask(scope.row)" />
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页功能区 -->
      <el-pagination
        :current-page="pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
      />
    </div>
  </div>
</template>

<script>
import { listTask, deleteTask, autoTest, updateStatus } from '@/api/auto/task.js'
import { findAllDemands } from '@/api/auto/demand.js'
export default {
  name: 'AutoCaseTask',
  data() {
    return {
      demandIds: [],
      taskList: [],
      taskListLoading: false,
      selectDemandList: [],
      selectDemandListOption: [],
      pageNo: 1,
      pageSize: 10,
      totalPage: 0,
      customColors: [
        { color: '#909399', percentage: 50 },
        { color: '#e6a23c', percentage: 75 },
        { color: '#67c23a', percentage: 100 }
      ]
    }
  },
  created() {
    this.getTaskList()
  },
  activated() {
    this.getTaskList()
  },
  methods: {
    manualTestTask(row) {
      // 只有状态为0的任务点击才需要更改任务状态
      if (row.status === 'INITED') {
        this.$confirm('此操作将把任务状态设置为“测试中”，并且记录任务开始时间，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updateStatus(row.id, 'RUNNING').then(respnose => {
            if (respnose && respnose.code === 200) {
              this.$router.push({
                name: 'AutoTaskCaseList',
                params: {
                  taskId: row.id
                }
              })
            } else {
              this.$message.error(respnose.message)
            }
          })
        })
      } else {
        this.$router.push({
          name: 'AutoTaskCaseList',
          params: {
            taskId: row.id
          }
        })
      }
    },
    autoTestTask(row) {
      autoTest(row.id).then(respnose => {
        if (respnose && respnose.code === 200) {
          this.$message.success(respnose.data)
          this.getTaskList()
        } else {
          this.$message.error(respnose.message)
        }
      })
    },
    getTaskList() {
      findAllDemands(1, 100).then(respnose => {
        if (respnose && respnose.code === 200) {
          this.selectDemandListOption = respnose.data.content
        } else {
          this.$message.error(respnose.message)
        }
      })
      this.taskListLoading = true
      listTask(this.selectDemandList.join(','), this.pageNo, this.pageSize).then(respnose => {
        if (respnose && respnose.code === 200) {
          this.taskList = respnose.data.content
          this.totalPage = respnose.data.totalElements
        } else {
          this.taskList = []
          this.$message.error(respnose.message)
        }
        this.taskListLoading = false
      })
    },
    deleteTask(row) {
      deleteTask(row.id).then(respnose => {
        if (respnose && respnose.code === 200) {
          this.$message.success(respnose.data)
          this.getTaskList()
        } else {
          this.$message.error(respnose.message)
        }
      })
    },
    taskReport(row) {
      this.$nextTick(() => {
        this.$router.push({
          name: 'AutoCaseTaskReport',
          params: {
            taskId: row.id
          }
        })
      })
    },
    // 多选
    selectionChangeHandle(val) {
      this.demandListSelections = val
    },
    // 每页数变化
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageNo = 1
      this.getTaskList()
    },
    // 当前页变化
    currentChangeHandle(val) {
      this.pageNo = val
      this.getTaskList()
    },
    rateFormat(percentage) {
      return '执行率：' + percentage.toFixed(2) + '%'
    },
    passRateFormat(percentage) {
      return '通过率：' + percentage.toFixed(2) + '%'
    },
    customColorMethod(percentage) {
      if (percentage < 50) {
        return '#f56c6c'
      } else if (percentage < 90) {
        return '#e6a23c'
      } else {
        return '#67c23a'
      }
    }
  }
}
</script>

<style scoped="scoped">
.div_box {
  border: 1px solid #eee;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  padding-bottom: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: auto;
}
</style>
